<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="true" name="HandheldFriendly">
    <title></title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link href="/web/css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/animate.css" rel="stylesheet" type="text/css"/>
    <link href="/web/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/web/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="contain">
        <div class="sidebar" id="head">

        </div>
        <section>
            <div class="right_h" id="right_h">

            </div>
            <div class="qulicklink">
                <ul>
                    <li><a href="javascript:;"></a></li>
                    <li><a href="javascript:;"><span>企业首页</span><img src="../web/images/close.png"></a></li>
                    <li class="dq"><a href="javascript:;"><span>业务管理</span><img src="../web/images/close.png"></a></li>
                    <li><a href="javascript:;"></a></li>
                </ul>
            </div>
            <div class="breadcrumbs">
                <ul>
                    <li>业务管理</li>
                    <li>业务收款</li>
                </ul>
            </div>
            <div class="clearfix"></div>
            <div class="content">
                <div class="addbtn" v-if="sum(42)">
                    <a @click="addbtnClick()" href="javascript:;">新增</a>
                </div>
                <div class="deletebtn" v-if="sum(44)">
                    <a @click="deleteAllClick()" href="javascript:;">删除</a>
                </div>
                <div class="importbtn" v-if="sum(45)">
                    <a @click="importClick()" href="javascript:;">导入</a>
                </div>
                <!--                <div class="adSearchbtn" v-if="sum(1101)">-->
                <!--                    <a @click="adSearchbtnClick()" href="javascript:;">高级搜索</a>-->
                <!--                </div>-->
                <!--高级搜索下拉框开始-->
                <!--                <div class="searchBox">-->
                <!--                    <div class="searchKey">-->
                <!--                        <label>-->
                <!--                            <span>客户名称:</span> <input name="resetval" placeholder="请输入客户名称" type="text"/>-->
                <!--                        </label>-->
                <!--                        <label>-->
                <!--                            <span>收款时间:</span>-->
                <!--                            <div class="layui-input-inline">-->
                <!--                                <input class="layui-input" id="date1" name="resetval" placeholder="yyyy-MM-dd"-->
                <!--                                       type="text">-->
                <!--                            </div>-->
                <!--                        </label>-->
                <!--                    </div>-->
                <!--                    <div class="btns">-->
                <!--                        <div class="addbtn searchbtn">-->
                <!--                            <a @click="searchbtnClick()" href="javascript:;">搜索</a>-->
                <!--                        </div>-->
                <!--                        <div class="addbtn setbtn">-->
                <!--                            <a @click="resetbtnClick()" href="javascript:;">重置</a>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <!--                </div>-->
                <!--高级搜索下拉框结束-->
                <div class="search">
                    <!--模糊查询开始-->
                    <label>
                        <span>客户名称:</span>
                        <div class="searchbox">
                            <input @input="search($event)" placeholder="请输入您要搜索客户名称" type="text">
                        </div>
                    </label>
                    <!--模糊查询结束-->
                </div>

                <!-- 这里是新增编辑弹出框开始-->
                <div class="consulting credit hidden">
                    <div class="layerbody">
                        <label>
                            <span>客户名称:</span> <input :value="(cumval)" @click="customerListchange()" autocomplete="off"
                                                      class="cum_name"
                                                      id="cumval" name="resetTc"
                                                      placeholder="客户名称" type="text"/>
                        </label>
                        <label>
                            <span>合同编号:</span>
                            <input :value="(codeval)" @click="contractNum()" autocomplete="off"
                                   class="hetongnum htmoneybg" name="resetTc" placeholder="合同编号" type="text"/>
                        </label>
                        <label>
                            <span>应收金额:</span> <input autocomplete="off" class="htmoneybg" id="remainingprice"
                                                      name="resetTc"
                                                      placeholder="0.0" type="number" :value="remainingprice" readonly />
                        </label>
                        <label>
                            <span>收款金额:</span> <input @input="changecollectionprice($event)" autocomplete="off"
                                                      class="skprice" id="collectionprice" name="resetTc"
                                                      placeholder="0.0" type="number"/>
                        </label>
                        <label>
                            <span>支付方式:</span>
                            <div class="layui-input-block">
                                <select class="paytype" lay-filter="batch"
                                        lay-search="required" lay-verify="required" name="resetTc" v-model="paytypeid">
                                    <option class="promptColor" value="0">请选择支付的方式</option>
                                    <option :value="v.id" v-for="(v,k) in ajaxData.paytype">{{v.title}}</option>
                                </select>
                            </div>
                        </label>
                        <label>
                            <span>收款日期:</span>
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="shoudate" name="resetTc"
                                       placeholder="yyyy-MM-dd" type="text"/>
                            </div>
                        </label>
                        <label>
                            <span>部门:</span>
                            <div class="layui-input-block">
                                <select @change="departmentchange($event)" id="characterid" lay-filter="batch"
                                        lay-search="required" lay-verify="required" name="resetTc" v-model="(characterid)">
                                    <option class="promptColor" value="0">请选择部门</option>
                                    <option :value="v.id" v-for="(v,k) in ajaxData.character">{{v.title}}</option>
                                </select>
                            </div>
                        </label>
                        <label>
                            <span>收款人:</span>
                            <div class="layui-input-block">
                                <select class="payee" lay-filter="batch"
                                        lay-search="required" lay-verify="required" name="resetTc" v-model="(userid)">
                                    <option class="promptColor" value="0">请选择收款人</option>
                                    <option :value="v.id" v-for="(v,k) in user">{{v.realname}}</option>
                                </select>
                            </div>
                        </label>
                        <div class="address">
                            <label>
                                <span>备注:</span>
                                <textarea class="notecon" name="resetTc" placeholder="添加备注" resize=""
                                          rows="4"></textarea>
                            </label>
                        </div>
                    </div>
                    <button @click="addsureBtn()" class="surebtn" type="submit">确认</button>
                    <button @click="addresetBtn()" class="resetbtn" type="submit">重置</button>
                </div>
                <!-- 这里是新增编辑弹出框结束-->

                <!--点击合同编号出来的弹窗开始-->
                <div class="orderBox hidden">
                    <div class="search">
                        <!--模糊查询开始-->
                        <label>
                            <span>客户名称:</span>
                            <div class="searchbox">
                                <input @input="searchWin($event,'clue','title')" placeholder="请输入您要搜索的客户名称"
                                       type="text"/>
                            </div>
                        </label>
                        <!--模糊查询结束-->
                    </div>
                    <!--搜索结束-->
                    <div class="layerbody layerbody_p">
                        <ul class="orderList">
                            <li class="listBg">
                                <ol>合同编号</ol>
                                <ol>客户名称</ol>
                                <ol>订单金额</ol>
                                <ol>支付方式</ol>
                                <ol>收款人</ol>
                            </li>
                            <li :key="index"
                                @dblclick="doubleClickEventCode($event,v.archivesid,v.paytypeid,v.userid,v.id,v.contractprice)"
                                v-for="(v,index) in code">
                                <ol>{{v.code}}</ol>
                                <ol>{{v.customer}}</ol>
                                <ol>{{v.contractprice}}</ol>
                                <ol>{{v.paytypetitle}}</ol>
                                <ol>{{v.name}}</ol>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--点击合同编号出来的弹窗结束-->
                <!--客户名称弹窗开始-->
                <div class="customerName hidden">
                    <div class="search">
                        <!--模糊查询开始-->
                        <label>
                            <span>客户名称:</span>
                            <div class="searchbox">
                                <input @input="searchWin($event,'archives','title')" placeholder="请输入您要搜索的客户名称"
                                       type="text"/>
                            </div>
                        </label>
                        <!--模糊查询结束-->
                    </div>
                    <div class="layerbody">
                        <ul class="customerNameList">
                            <li class="customerbg">
                                <ol>客户名称</ol>
                                <ol>联系电话</ol>
                                <ol>联系人</ol>
                                <ol>网址</ol>
                            </li>
                            <li :key="index" @dblclick="doubleClickEvent($event,v.id)"
                                v-for="(v,index) in archivesList">
                                <ol class="cumname">{{v.title}}</ol>
                                <ol>{{v.tel}}</ol>
                                <ol>{{v.contacts}}</ol>
                                <ol>{{v.link}}</ol>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--客户名称弹窗结束-->
            </div>
            <div class="t_body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th><input @click="deleteCheckAll()" class="checkboxAll" id="deleteCheckAll"
                                       type="checkbox"> 全选
                            </th>
                            <th>客户名称</th>
                            <th>合同编号</th>
                            <th>销售金额</th>
                            <th>收款金额</th>
                            <th>收款时间</th>
                            <th>支付方式</th>
                            <th>收款人</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr :key="index" @dblclick="editorClick(v.id)" v-for="(v,index) in tableDataList">
                            <td><input :id="'listcheck' + (v.id)" class="selectCheck" type="checkbox"/></td>
                            <td>{{v.archivestitle}}</td>
                            <td>{{v.code}}</td>
                            <td>{{v.saleprice}}</td>
                            <td>{{v.collectionprice}}</td>
                            <td>{{v.collectiontime}}</td>
                            <td>{{v.parametertitle}}</td>
                            <td>{{v.realname}}</td>
                            <td>
                                <div class="editor" v-if="sum(43)">
                                    <a @click="editorClick(v.id)" href="javascript:;">
                                        <img src="images/editor.png">
                                    </a>
                                    <span>编辑</span>
                                </div>
                                <div class="deletes" v-if="sum(44)">
                                    <a @click="deletesClick(v.id)" href="javascript:;">
                                        <img src="images/deletes.png">
                                    </a>
                                    <span>删除</span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!---------------------------分页start----------------------------->
                <div class="pageFen" v-if="totalNum>1">
                    <ul>
                        <li>
                            <a @click="setPage(curNum-1)" class="pageLink" href="#">上一页</a>
                        </li>
                        <li v-for="n in totalNum">
                            <a class="pageLink curNum" v-if="n == curNum" v-text="n"></a>
                            <a @click="setPage(n)" class="pageLink" href="javascript:;" v-else v-text="n"></a>
                        </li>
                        <li><a @click="setPage(curNum+1)" class="pageLink" href="#">下一页</a></li>
                    </ul>
                </div>
                <!---------------------------分页end-------------------------------->
            </div>
        </section>
    </div>
</div>
<script src="/web/js/vue.js"></script>
<script src="/web/js/jquery-1.10.0.min.js"></script>
<script src="/web/layui/layui.js"></script>
<script src="/web/js/transform.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //录入时间
        laydate.render({
            elem: '#date1', //指定元素
            type: "date", // 组件的类型：year,month,time···
            format: 'yyyy-MM-dd'// 设置显示格式
        });
        laydate.render({
            elem: '#shoudate', //指定元素
            type: "date", // 组件的类型：year,month,time···
            format: 'yyyy-MM-dd'// 设置显示格式
        });
    });
</script>
<script>
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script>
    AppData = new Vue({
        el: '#app',
        data: {
            tableData: {},
            categoryIndex: 0,
            show: false,
            tableDataList: {},
            totalNum: 0, //总页数
            listRows: 8, //每页数量
            curNum: 1, //当前页码
            characterid: 0,
            cumval: '',
            codeval: '',
            ajaxData: {},
            archivesList: {},
            code: {},
            user: {},
            dataList: {},
            archivesid: 0,
            paytypeid: 0,
            userid: 0,
            contractid: 0,
            edid: 0,
            collectionprice: 0,
            remainingprice: 0,
            map: {}
        },
        mounted() {
            $("#head").load("header.html");
            $("#right_h").load("right.html");
            this.getIndexData();
        },
        methods: {
            verification(data) {
                if (data.status == 2) {
                    layer.msg(data.message, {icon: 2, time: 1000}, function () {
                        window.location.href = "login.html";
                    });
                }
            },
            addbtnClick() {
                this.addresetBtn();
                //点击出来弹窗
                layeraddoredit = layer.open({
                    type: 1,
                    title: '新增收款',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    scrollbar: true,
                    area: ['850px', '630px'],
                    content: $('.consulting'),
                    success: function () {
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: '/collection/create',
                            data: {},
                            success: function (data) {
                                AppData.verification(data);
                                AppData.ajaxData = data;
                                AppData.archivesList = {...data.archives};
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.consulting').hide();
                    }
                })
            },
            addsureBtn() {
                let paytypeid = $('.paytype').val();
                let userid = $('.payee').val();
                let collectionprice = $('.skprice').val();
                let collectiontime = $('#shoudate').val();
                let content = $('.notecon').val();
                this.codeval = $('.hetongnum').val();
                if (this.edid == 0) { //新增
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: '/collection',
                        data: {
                            archivesid: this.archivesid,
                            contractid: this.contractid,
                            userid: userid,
                            paytypeid: paytypeid,
                            collectionprice: collectionprice,
                            collectiontime: collectiontime,
                            characterid: $('#characterid').val(),
                            content: content
                        },
                        success: function (data) {
                            AppData.verification(data);
                            if (data.status == 1) {
                                layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                    AppData.getIndexData();
                                    layer.close(layeraddoredit);
                                });
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        }
                    });
                } else {
                    $.ajax({
                        type: "PUT",
                        dataType: "json",
                        url: '/collection/' + this.edid,
                        data: {
                            archivesid: this.archivesid,
                            contractid: this.contractid,
                            userid: userid,
                            paytypeid: paytypeid,
                            collectionprice: collectionprice,
                            collectiontime: collectiontime,
                            characterid: $('#characterid').val(),
                            content: content
                        },
                        success: function (data) {
                            AppData.verification(data);
                            if (data.status == 1) {
                                layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                    AppData.getIndexData();
                                    layer.close(layeraddoredit);
                                });
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        }
                    });

                }
            },
            editorClick(edid) {
                this.edid = edid;
                layeraddoredit = layer.open({
                    type: 1,
                    title: '编辑菜单',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['900px', '600px'],
                    content: $('.consulting'),
                    success: function () {
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: '/collection/' + edid,
                            data: {'id': edid},
                            success: function (data) {
                                AppData.verification(data);
                                AppData.getremainingprice(data.info.contractid);
                                AppData.ajaxData = data;
                                AppData.user = data.user;
                                console.log(data);
                                AppData.archivesList = {...data.archives};
                                AppData.archivesid = data.info.archivesid;
                                AppData.userid = data.info.userid;
                                AppData.paytypeid = data.info.paytypeid;
                                AppData.cumval = data.info.archivestitle;
                                AppData.codeval = data.info.code;
                                AppData.contractid = data.info.contractid;
                                AppData.code = data.code;
                                $('#shoudate').val(data.info.collectiontime);
                                $('.notecon').val(data.info.content);
                                $('.cum_name').val(data.info.archivesid);
                                $('.hetongnum').val(data.info.contractid);
                                $('#collectionprice').val(data.info.collectionprice);
                                AppData.characterid = data.info.characterid;
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.consulting').hide();
                    }
                })
            },
            setPage(num) {
                //页码小于等于1
                if (num < 1) {
                    num = 1;
                }
                //页码大于总页数
                if (num > this.totalNum) {
                    num = this.totalNum;
                }
                //页码赋给当前页
                this.curNum = num;
                this.getIndexData();
            },
            search(e) {//客户列表搜索名称
                var that = this;
                var keywords = e.target.value;
                this.map.title = keywords;
                this.getIndexData();
            },
            sum(sumid) {//验证列表里的修改删除是否要显示(根据对应的id)
                for (i in this.dataList) {
                    if (sumid == this.dataList[i].id) {
                        return true;
                    }
                }
                return false;
            },
            deletesClick(deleteid) {
                layui.use('layer', function () {
                    layer.confirm('确认要删除吗？', {
                        btn: ['确定', '取消']//按钮
                    }, function () {
                        let ids = [];
                        ids.push(deleteid);
                        $.ajax({
                            type: "DELETE",
                            dataType: "json",
                            url: '/collection/0',
                            data: {'ids': ids},
                            success: function (data) {
                                AppData.verification(data);
                                if (data.status == 1) {
                                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                        AppData.getIndexData();
                                    });
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 1000});
                                }
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    });
                });
            },
            deleteCheckAll() {
                let checkBoxs = AppData.tableDataList;
                if ($('#deleteCheckAll').is(":checked")) {
                    for (let j in checkBoxs) {
                        $('#listcheck' + checkBoxs[j].id).prop('checked', true);
                    }
                } else {
                    for (let j in checkBoxs) {
                        $('#listcheck' + checkBoxs[j].id).prop('checked', false);
                    }
                }
            },
            deleteAllClick() {
                layui.use('layer', function () {
                    layer.confirm('确认要删除吗？', {
                        btn: ['确定', '取消']//按钮
                    }, function () {
                        let ids = [];
                        let checkBoxs = AppData.tableDataList;
                        for (let i in checkBoxs) {
                            if ($('#listcheck' + checkBoxs[i].id).is(":checked")) {
                                ids.push(checkBoxs[i].id);
                            }
                        }
                        if (ids.length == 0) {
                            layer.msg('请选择你要删除的选项');
                            return false;
                        }
                        console.log(ids);
                        $.ajax({
                            type: "DELETE",
                            dataType: "json",
                            url: '/collection/0',
                            data: {'ids': ids},
                            success: function (data) {
                                console.log(data);
                                AppData.verification(data);
                                if (data.status == 1) {
                                    layer.msg(data.message, {icon: 1, time: 1000}, function () {
                                        AppData.getIndexData();
                                    });
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 1000});
                                }
                            },
                            error: function (msg) {
                                console.log(msg);
                            }
                        });
                    });
                });
            },
            resetbtnClick() {
                $('input[name="resetval"]').val('');
                $('select[name="resetval"]').val('0');
            },
            addresetBtn() {
                $('input[name="resetTc"]').val('');
                $('select[name="resetTc"]').val('0');
                $('textarea[name="resetTc"]').val('');
                this.cumval = '';
                this.codeval = '';
                this.paytypeid = 0;
                this.collectionprice = 0;
                this.userid = 0;
                this.remainingprice = 0;
            },
            contractNum() {
                if (!$('#cumval').val()) {
                    layer.msg('请先选择客户', {icon: 2, time: 1000});
                    return false;
                }
                contractnum = layer.open({
                    type: 1,
                    title: '合同编号',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['750px', '550px'],
                    id: 'layer02',
                    content: $('.orderBox'),
                    success: function () {

                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.orderBox').hide();
                    }
                })
            },
            customerListchange() {//点击客户名称列表
                mylay = layer.open({
                    type: 1,
                    title: '选择客户',
                    maxmin: true,
                    resize: true,
                    shadeClose: false, //点击遮罩关闭层
                    area: ['800px', '650px'],
                    id: 'layer03',
                    content: $('.customerName'),
                    success: function () {
                    },
                    end: function () { //解决弹窗关闭以后,弹窗内容还出现在下方的问题
                        $('.customerName').hide();
                    }
                })
            },
            doubleClickEvent(e, archivesid) {//获取客户名称的双击事件
                var lis = e.currentTarget.firstElementChild.innerHTML;
                this.cumval = lis;
                this.archivesid = archivesid;
                layer.close(mylay);
                //获取合同编号
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/contract',
                    data: {'listRows': AppData.listRows, 'page': AppData.curNum, 'archivesid': this.archivesid},
                    success: function (data) {
                        AppData.code = {...data.list.data};
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            },
            searchWin(e, table, field) {//客户列表搜索名称
                var that = this;
                var keywords = e.target.value;
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/keyword',
                    data: {'table': table, 'field': field, 'keywords': keywords},
                    success: function (data) {
                        AppData.archivesList = data.list;
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            },
            doubleClickEventCode(e, archivesid, paytypeid, userid, id, contractprice) {//获取合同编号的双击事件
                var codeval = e.currentTarget.firstElementChild.innerHTML;
                this.codeval = codeval;
                this.archivesid = archivesid;
                this.paytypeid = paytypeid;
                this.userid = userid;
                this.contractid = id;
                this.collectionprice = contractprice;
                this.getremainingprice(id);
                layer.close(contractnum);
            },
            //------------------------------------------------------------------------------------------------------------------------------------------------------------
            getIndexData() {
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/collection',
                    data: {'listRows': this.listRows, 'page': this.curNum, map:this.map},
                    success: function (data) {
                        AppData.verification(data);
                        AppData.totalNum = data.list.last_page;  //获取总的页面数
                        AppData.dataList = data.userInfo.jurisdiction; //所有的权限
                        AppData.ajaxData = data;
                        let dataS = data.userInfo.jurisdiction;//后台初始数据
                        var dataArr = [];
                        for (let i in dataS) {
                            dataArr.push(dataS[i]); //属性
                        }
                        /*调用封装的改变数据结构方法*/
                        let tableData = setTreeData(dataArr);
                        let tableDataObj = {...tableData};//把转换后的数组通过扩展运算符改成对象便于遍历
                        AppData.tableData = tableDataObj;
                        //表格中数据的渲染
                        let tableList = {...data.list.data};
                        AppData.tableDataList = tableList;
                    },
                    error: function (msg) {
                    }
                });
            },
            //根据合同定价应收金额
            getremainingprice(id){
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    url: '/collection/'+ id +'/edit',
                    data: {},
                    success: function (data) {
                        $('#remainingprice').val(data.info.remainingprice);
                        AppData.remainingprice = data.info.remainingprice;
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            },
            changecollectionprice(e){
                var price = event.target.value;
                if (price > this.remainingprice){
                    $('#collectionprice').val(this.remainingprice);
                }
            },
            departmentchange(e){
                id = event.target.value;
                headerData.departmentchange(id);
            }
        }
    })
</script>
</body>
</html>
